Welcome folks today in this blog post we will be exporting the html document to pdf document with page break in browser using javascript. All the full source code of the application is shown below.

聽

聽

聽

聽

In order to get started you need to make a index.html file and copy paste the following code

聽

First of all we will be including the cdn of html2pdf library as shown below

聽

聽

聽

聽

And as you can see in the above code we are including the cdn of html2pdf.js library as shown above. And now we need to write some html that we need to export to pdf document as shown below

聽

聽

聽

聽

As you can see we have the div parent element and we have given id to it so that we can target it using the javascript. And then we have a div with some content and then we have a page break class which is html2pdf.js page break class which is called html2pdf__page-break you need to write the same class because this class will make sure it will add the page break after this the content will be shifted to the second page in the pdf document. And after this we are defining one other div element with some content. And now we simply need to export to pdf document by adding some javascript code as shown below

聽

聽

聽

聽

Now first of all we will be targeting the parent div element which has got the id attached to it as shown below

聽

聽

聽

聽

Now we simply need to call the html2pdf() method and pass this element to it as shown below

聽

聽

聽

聽

Now if you open the application the pdf file will be downloaded automatically as an attachment as you can see

聽

聽

聽

聽

聽

聽

聽

As you can see the content is split up into 2 pages with page break but there is some problem out there. We need to add some margin and padding to the text. So we can provide some config options to the html2pdf() constructor as shown below

聽

聽

聽

聽

As you can see we are providing some custom options such as the margin which is in numbers and then we are also passing the custom filename to the pdf document and also adding the image quality and type parameter.聽 Now if you open the app the text will have some space and margin in pdf document

聽

聽

聽

聽

聽

聽

Wrapping it up this is the full source code of index.html file with javascript

聽

聽

index.html

聽

聽